<template>

  <div class="login-container">

    <div class="login-logo">
      <img src="../../logo.png" alt="">
      <span>红相股份项目管理系统</span>
    </div>

    <el-row class="login-item" style="display: flex;justify-content: center;">
      <el-col :span="10" class="login-left">
        <div>
          <img class="login-banner" src="./images/login-banner.png" alt="">

        </div>
      </el-col>
      <el-col :span="10" class="login-right">
      <el-form ref="loginForm" size="medium" :model="loginForm" :rules="loginRules" class="login-form"  auto-complete="on"  label-position="left">
            <div class="title-container"> <h3 class="title">登录</h3></div>
            <el-form-item prop="username">
                <span class="svg-container">
                  <svg-icon icon-class="user"/>
                </span>
                <el-input size="medium"
                          ref="username"
                          v-model="loginForm.username"
                          placeholder="用户名"
                          name="username"
                          type="text"
                          tabindex="1"
                          auto-complete="on"
                />
            </el-form-item>

            <el-form-item prop="password">
                <span class="svg-container">
                  <svg-icon icon-class="password"/>
                </span>
                <el-input size="medium"
                          :key="passwordType"
                          ref="password"
                          v-model="loginForm.password"
                          :type="passwordType"
                          placeholder="密码"
                          name="password"
                          tabindex="2"
                          auto-complete="on"
                          @keyup.enter.native="handleLogin"
                />
                <span class="show-pwd" @click="showPwd">
                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
                </span>
            </el-form-item>

            <el-form-item prop="captcha">
                <span class="svg-container">
                  <svg-icon icon-class="password"/>
                </span>
                <el-input size="medium" v-model="loginForm.captcha" placeholder="验证码" style="width: 200px;"
                          @keyup.enter.native="handleLogin">
                </el-input>
                <span class="show-captcha">
                    <img :src="captchaPath" @click="getCaptcha()" alt="">
                </span>
            </el-form-item>

            <el-button size="medium" :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
                       @click.native.prevent="handleLogin">登录
            </el-button>
<!--          <div @click="helpcenter">帮助中心</div>-->
        </el-form>
      </el-col>
    </el-row>

    <div class="login-bottom ">
        <p>2018-现在 红相股份有限公司 版权所有</p>
    </div>
  </div>
</template>

<script>
    import {getUUID} from '@/utils'
    import {getAction} from '@/api/manage'
    export default {
        name: 'Login',
        data() {
            const validateUserId = (rule, value, callback) => {
                if (value.length == 0) {
                    callback(new Error('请输入用户名'))
                } else {
                    callback()
                }
            }
            const validatePassword = (rule, value, callback) => {
                if (value.length == 0) {
                    callback(new Error('请输入密码'))
                } else {
                    callback()
                }
            }
            const validateCaptcha = (rule, value, callback) => {
                if (value.length == 0) {
                    callback(new Error('请输入验证码'))
                } else {
                    callback()
                }
            }
            return {
                captchaPath: '',
                loginForm: {
                    username: '',
                    password: '',
                    uuid: '',
                    captcha: ''
                },
                loginRules: {
                    username: [{required: true, trigger: 'blur', validator: validateUserId}],
                    password: [{required: true, trigger: 'blur', validator: validatePassword}],
                    captcha: [{required: true, trigger: 'blur', validator: validateCaptcha}]
                },
                loading: false,
                passwordType: 'password',
                redirect: undefined
            }
        },
        watch: {
            $route: {
                handler: function (route) {
                    this.redirect = route.query && route.query.redirect
                },
                immediate: true
            }
        },
        created() {
            this.getCaptcha()
        },
        methods: {
            helpcenter(data) {
              //  this.$router.replace({path: '/helpcenter'})
          const {href} = this.$router.resolve({
          path: `/helpcenter`,
           });
          window.open(href, '_blank');
          // this.$router.push({path:'/helpcenter'})
            },
            showPwd() {
                if (this.passwordType === 'password') {
                    this.passwordType = ''
                } else {
                    this.passwordType = 'password'
                }
                this.$nextTick(() => {
                    this.$refs.password.focus()
                })
            },
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true
                        this.$store.dispatch('user/login', this.loginForm).then(() => {
                            this.getCaptcha()
                            this.$router.push({path: this.redirect || '/'})
                            // this.$router.push({path: '/'})
                            this.loading = false
                        }).catch(() => {
                             this.getCaptcha()
                            this.loading = false
                        })
                    } else {
                        this.getCaptcha()
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            // 获取验证码
            getCaptcha() {
                this.loginForm.uuid = getUUID()
                this.captchaPath = `${process.env.VUE_APP_BASE_URL}/captcha.jpg?uuid=${this.loginForm.uuid}`
                console.log(this.captchaPath)
            }
        }
    }
</script>
<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #000; //#283443;

  $light_gray: #2d3a4b;
  $cursor: #fff;

  @supports (-webkit-mask: none) and (not (cater-color: #000)) {
    .login-container .el-input input {
      color: #000;
    }
  }


  /* reset element-ui style */
  .login-container {
    position: relative;
    // background: #dfe6ec;
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: #fff;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        //caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px #fff inset !important;
          -webkit-text-fill-color: #000 !important;
        }
      }
    }

    .el-form-item {
      border: 1px solid rgba(0, 0, 0, 0.1);
      //background:$bg;
      border-radius: 5px;
      color: #454545;
    }
  }
</style>

<style lang="scss" scoped>
  //$bg:#2d3a4b;
  //$bg:#fff;
  $bg: #fafafa;
  $dark_gray: #889aa4;
  $light_gray: #2d3a4b;

  .login-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .login-logo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // width: 405px;
      height: 100px;
      padding: 50px 40px 10px 40px;
      justify-content: flex-start;
      margin-left: 50px;
      img {
        width: 120px;
        height: 130px;
      }

      span {
        margin-left: 20px;
        font-size: 30px;
        font-weight: bold;
      }
    }

    .login-left {
      width: 400px;
      height: 400px;

      .login-banner {
        width: 100%;
      }
    }

    .login-right {
      width: 400px;
      height: 400px;
      padding: 0 50px;
      position: relative;
      background: #fff;
    }

    .login-form {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 320px;
      /*max-width: 100%;*/
      //padding: 120px 0px 0;
      margin: 0 0;
      overflow: hidden;
    }

    .label-button {
      border-bottom: 0px solid #dfe6ec;
      padding-bottom: 10px;
      margin: 10px auto;
      font-weight: bold;
      color: $light_gray;
    }

    .tips {
      margin-bottom: 20px;
      font-size: 14px;
      color: #fff;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .codeImg {
      height: 49px;
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;
    }

    .title-container {
      position: relative;

      .title {
        font-size: 20px;
        color: $light_gray;
        margin: 0px auto 20px auto;
        text-align: center;
        /*font-weight: bold;*/
      }

      .set-language {
        color: #fff;
        position: absolute;
        top: 3px;
        font-size: 18px;
        right: 0px;
        cursor: pointer;
      }
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }

    .thirdparty-button {
      position: absolute;
      right: 0;
      bottom: 0px;
    }

    @media only screen and (max-width: 470px) {
      .thirdparty-button {
        display: none;
      }
      .thirdparty-button {
        display: none;
      }
    }


    .pan-back-btn {
      background: #008489;
      color: #fff;
      border: none !important;
    }

    .pan-gif {
      margin: 0 auto;
      display: block;
    }

    .pan-img {
      display: block;
      margin: 0 auto;
      width: 100%;
    }

    .text-jumbo {
      font-size: 60px;
      font-weight: 700;
      color: #484848;
    }

    .list-unstyled {
      font-size: 14px;

      li {
        padding-bottom: 5px;
      }

      a {
        color: #008489;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .login-bottom {
      line-height: 30px;
      text-align: center;
      margin-bottom: 30px;

      p:nth-child(1) {
        font-size: 17px;
        color: $light_gray;
      }

      p:nth-child(2) {
        font-size: 10px;
        color: $light_gray;
      }
    }
  }
    .show-captcha {
            position: absolute;
            //top: 1px;
            right: 1px;
            font-size: 16px;
            color: $dark_gray;
            cursor: pointer;
            user-select: none;
        }
</style>

